<template>
  <el-dialog
    title="选择题目"
    :visible.sync="visible"
    @close="onClose"
    @closed="onClosed"
    top="50px"
    width="800px"
    center
  >
    <table-filter>
      <el-input
        v-model="apiSetting.data.quetitle"
        placeholder="请输入题目名称"
        clearable
      ></el-input>
      <el-select
        v-model="apiSetting.data.subidList"
        clearable
        style="flex: 1"
        @change="onSubChange"
        placeholder="请选择科目"
      >
        <el-option
          v-for="item in subjects"
          :key="item.subid"
          :label="item.name"
          :value="item.subid"
        >
        </el-option>
      </el-select>
      <el-select clearable v-model="apiSetting.data.chapterid" placeholder="请选择章节">
        <el-option
          v-for="item in chapters"
          :key="item.chapterid"
          :label="item.chaptername"
          :value="item.chapterid"
        />
      </el-select>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <data-table
      @after-load-data="afterLoadData"
      @select="onSelect"
      @select-all="onSelectAll"
      ref="dtb"
      pagination
      :api-setting="apiSetting"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        fixed
        prop="queid"
        label="题目编号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        fixed
        prop="quetitle"
        label="题目内容"
        show-overflow-tooltip
      >
      </el-table-column>
    </data-table>
    <div style="margin-top: 10px;text-align: center">
      <el-button @click="addQue">添加</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialog from "../../../mixins/component/dialog";
import TableFilter from "../../../components/TableFilter";
import tbSearch from "@/mixins/dataTable/tbSearch";

export default {
  name: "SelectQue",
  components: { TableFilter },
  mixins: [tbSearch, dialog],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/papermanage/getQuestion",
        data: {
          chapterid: null,
          quetitle: "",
          subidList: "",
          qustypeid: null,
          pageNo: 1
        }
      },
      selectedQue: [],
      subjects: [],
      chapters: [],
      count: null
    };
  },
  watch: {
    subjects: {
      immediate: true,
      handler(n) {
        if (n.length) this.apiSetting.data.subidList = n[0].subid;
      }
    },
    "apiSetting.data.subidList"(n) {
      this.api.getChapter.apply(this, [n]);
    },
    visible(n) {
      n && this.$refs.dtb && this.$refs.dtb.loadData();
    }
  },
  methods: {
    afterLoadData() {
      const dtb = this.$refs.dtb;
      const dtbList = dtb.$data.list;
      const elTable = dtb.$refs.elTable;
      if (!this.selectedQue.length) return;
      this.$nextTick(() => {
        for (let i = 0; i < this.selectedQue.length; i++)
          for (let j = 0; j < dtbList.length; j++) {
            const item = dtbList[j];
            if (this.selectedQue[i] == item.queid) {
              elTable.toggleRowSelection(item);
              break;
            }
          }
      });
    },
    addQue() {
      this.visible = false;
      this.$emit("add-que", this.selectedQue, this.apiSetting.data.qustypeid);
    },
    onSelect(selection, row) {
      const { queid } = row;
      const isSelected = selection.map(item => item.queid).includes(queid);
      if (isSelected) this.selectedQue.push(queid);
      else {
        this.selectedQue.splice(this.selectedQue.indexOf(queid), 1);
      }
    },
    onSubChange() {
      this.chapters.splice(0);
      this.apiSetting.data.chapterid = null;
    },
    // isListReachLimit(selectedData) {
    //   //if the list reach the limit number
    //   const elTable = this.$refs.dtb.$refs.elTable;
    //   let isListReachLimit = false;
    //   if (Array.isArray(selectedData)) {
    //     //select all
    //     if (this.concatSelectedQue(selectedData).length > this.count) {
    //       elTable.toggleAllSelection();
    //       isListReachLimit = true;
    //     }
    //   } else if (this.count == this.selectedQue.length) {
    //     // select single
    //     elTable.toggleRowSelection(selectedData, false);
    //     isListReachLimit = true;
    //   }
    //   isListReachLimit && this.$message.error("当前题目以到达最大限制");
    //   return isListReachLimit;
    // },
    onSelectAll(selection) {
      if (selection.length)
        this.selectedQue = this.concatSelectedQue(selection);
      else {
        const dtbList = this.$refs.dtb.$data.list;
        for (let i = 0; i < dtbList.length; i++) {
          const item = dtbList[i];
          if (this.selectedQue.indexOf(item.queid) !== -1)
            this.selectedQue.splice(this.selectedQue.indexOf(item.queid), 1);
        }
      }
    },
    concatSelectedQue(selection) {
      return [
        ...new Set(this.selectedQue.concat(selection.map(item => item.queid)))
      ];
    },
    onClosed() {
      this.apiSetting.data.pageNo = 1;
    }
  }
};
</script>

<style scoped></style>
